<template>
    <div>
        <div class="card card-custom gutter-b example example-compact" id="tableBody">
            <div class="card-header">
                <div class="card-title">
                    <span class="card-icon">
                        <i class="text-dark-50 flaticon-search-magnifier-interface-symbol"></i>
                    </span>
                    <h3 class="card-label"> 查询区域 </h3>
                </div>
                <div class="card-toolbar">
                    <div class="example-tools justify-content-center">
                        <!-- 
                <span data-toggle="tooltip" class="example-toggle"></span>
                <span data-toggle="tooltip" class="example-copy"></span> 
              -->
                    </div>
                </div>
            </div>
            <div class="card-body">
                <!--查询条件-->
                <div class="m-form m-form--fit m-form--label-align-left m-form--group-seperator-dashed">
                    <div class="m-portlet__body">
                        <div class="form-group m-form__group row">
                            <label class="col-form-label">标题:</label>
                            <div class="col-lg-2">
                                <input type="text" class="form-control" v-model="searchForm.title" placeholder="请输入">
                            </div>
                            <label class="col-form-label">标识:</label>
                            <div class="col-lg-2">
                                <el-select maxlength="20" v-model="searchForm.flag" placeholder="请选择">
                                    <el-option value="">请选择</el-option>
                                    <el-option
                                        v-for="item in [{value:'0',label:'通过平台设计器设计'},{value:'1',label:'通过上传部署'}]"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </div>
                            <label class="col-form-label">状态:</label>
                            <div class="col-lg-2">
                                <el-select maxlength="20" v-model="searchForm.status" placeholder="请选择">
                                    <el-option value="">请选择</el-option>
                                    <el-option
                                        v-for="item in [{value:'0',label:'待发布'},{value:'1',label:'发布中'},{value:'2',label:'已关闭'}]"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </div>
                            <label class="col-form-label">模块Key:</label>
                            <div class="col-lg-2">
                                <input type="text" class="form-control"  v-model="searchForm.moduleKey" placeholder="请输入">
                            </div>
                        </div>
                        <div class="form-group m-form__group row">
                            <label class="col-form-label">产品:</label>
                            <div class="col-lg-2">
                                <el-select maxlength="20" v-model="searchForm.lcProductId" placeholder="请选择">
                                    <el-option value="">请选择</el-option>
                                    <el-option
                                    v-for="item in productList" :key="item.id" :label="item.name"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                            </div>
                            <label class="col-form-label">产品组:</label>
                            <div class="col-lg-2">
                                <el-select maxlength="20" v-model="searchForm.lcGroupId" placeholder="请选择">
                                    <el-option value="">请选择</el-option>
                                    <el-option
                                    v-for="item in groupList" :key="item.id" :label="item.name"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                            </div>
                            <b-button :pressed="false" variant="btn btn-primary font-weight-bold mr-2"
                                @click="search()"><span><i class="fa fa-search"></i><span>查询</span></span></b-button>
                            <b-button :pressed="false" variant="btn btn-light font-weight-bold mr-2" @click="resetAll()">
                                <span><span>清空条件</span></span></b-button>
                        </div>
                    </div>
                    <div class="m-portlet__foot m-portlet__no-border m-portlet__foot--fit">
                        <div class="m-form__actions m-form__actions--solid">
                            <div class="row">
                                <div class="col m--align-left">
                                    <button class="btn btn-light-success font-weight-bold mr-2 " @click="addXtLcProcess">
                                        <span><i class="la la-plus la-lg"></i><span>新 增</span></span>
                                    </button>

                                    <button class="btn btn-light-primary font-weight-bold mr-2" @click="updateXtLcProcess"
                                        :disabled="this.sels.length != 1">
                                        <span><i class="la la-pen-alt"></i><span>编 辑</span></span>
                                    </button>
                                    <!-- :disabled="this.sels.length === 0" 如果没有数据让删除按钮失效 -->
                                    <button class="btn btn-light-danger font-weight-bold mr-2" @click="delXtLcProcess"
                                        :disabled="this.sels.length === 0">
                                        <span><i class="far fa-trash-alt"></i><span>废 弃</span></span>
                                    </button>
                                    <a class="btn btn-secondary m-btn m-btn--custom m-btn--label-success" @click="importProcess">
                                        <span><i class="fa flaticon-folder-3"></i><span> 导 入</span></span>
                                    </a>
                                </div>
                                <div class="col text-right">
                                    <a class="btn btn-text-dark-50 btn-icon-primary font-weight-bold btn-hover-bg-light mr-3" href="javascript:void(0)" @click="addDesign">
                                        <b-spinner small variant="primary"  type="grow"></b-spinner>
                                        在线设计
                                    </a>   
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--分页组件-->
            <el-table style="width: 100%" stripe border @selection-change="handleSelectionChange" highlight-current-row
                :data="dataList">
                <!-- 复选框 -->
                <el-table-column type="selection" width="40"></el-table-column>
                <el-table-column label="序号" min-width="50" fixed="left">
                    <template slot-scope="scope">
                        {{ scope.$index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column align="center" label="#" fixed="left" min-width="380">
                    <template slot-scope="scope">
                        <!--scope.row当前行的对象-->
                        <button  @click="getLcProcessDetail(scope.row)" class="btn btn-link" title="详情">详 情</button>
                        <button v-if="scope.row.flag == 0" @click="addLcDesign(scope.row)" class="btn btn-link" title="设计流程">设计流程</button>
                        <button @click="showProcessImage(scope.row)" v-if="scope.row.flag == 0" class="btn btn-link" title="监 控">监 控</button>
                        <button v-if="scope.row.flag == 1" @click="downFile(scope.row)" class="btn btn-link" title="下载附件">下载附件</button>
                        <button @click="copyProcess(scope.row)" class="btn btn-link" title="复制一个模型">复 制</button>
                        <button @click="showLcDeploymentHis(scope.row)" class="btn btn-link" title="发布版本记录">版 本</button>
                        <button @click="createDeployment(scope.row)" class="btn btn-link" title="发布流程">发 布</button>
                        <button @click="exportProcess(scope.row)" class="btn btn-link" v-if="scope.row.flag == 0"  title="导出流程">导 出</button>
                        <button @click="showResources(scope.row)" v-if="scope.row.flag == 0" class="btn btn-link" title="流程源码">源 码</button>
                    </template>
                </el-table-column>
                <el-table-column align="left"  fixed="left" prop="title" min-width="150" show-overflow-tooltip label="流程标题"></el-table-column>
                <el-table-column align="left" prop="status" min-width="150" show-overflow-tooltip label="运行状态">
                    <template slot-scope="scope">
                        <div v-if="scope.row.status == 0">
                            <b-badge class="mr-1" variant="primary">待发布</b-badge>
                        </div>
                        <div v-else-if="scope.row.status == 1">
                            <b-badge class="mr-1" variant="success">发布中</b-badge>
                        </div>
                        <div v-else-if="scope.row.status == 2">
                            <b-badge class="mr-1" variant="danger">已关闭</b-badge>
                        </div>
                        <div v-else>
                            <b-badge class="mr-1" variant="secondary">未知</b-badge>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column align="left" prop="delFlag" show-overflow-tooltip label="使用状态">
                    <template slot-scope="scope">
                        <div v-if="scope.row.delFlag == 0">
                            <b-badge class="mr-1" variant="primary">使用中</b-badge>
                        </div>
                        <div v-else-if="scope.row.delFlag == 1">
                            <b-badge class="mr-1" variant="danger">已废弃</b-badge>
                        </div>
                        <div v-else>
                            <b-badge class="mr-1" variant="secondary">未知</b-badge>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column align="left" prop="flag" min-width="150" show-overflow-tooltip label="标识">
                    <template slot-scope="scope">
                        <div v-if="scope.row.flag == 0">
                            <b-badge class="mr-1" variant="primary">通过平台设计器设计</b-badge>
                        </div>
                        <div v-else-if="scope.row.flag == 1">
                            <b-badge class="mr-1" variant="danger">通过上传部署</b-badge>
                        </div>
                        <div v-else>
                            <b-badge class="mr-1" variant="secondary">未知</b-badge>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column align="left" prop="version" show-overflow-tooltip label="版本">
                   
                </el-table-column>
                <el-table-column align="left" prop="name" show-overflow-tooltip label="产品线">
                   
                </el-table-column>
                <el-table-column align="left" prop="groupName" show-overflow-tooltip label="产品组">
                   
                </el-table-column>
                <el-table-column align="left" prop="w" show-overflow-tooltip label="宽"></el-table-column>
                <el-table-column align="left" prop="h" show-overflow-tooltip label="高"></el-table-column>
                <el-table-column align="center" prop="createBy" label="创建人" min-width="150"></el-table-column>
                <el-table-column align="center" prop="createTime" label="创建时间" min-width="180"></el-table-column>
                <el-table-column align="center" prop="modifiedBy" label="修改人" min-width="150"></el-table-column>
                <el-table-column align="center" prop="updateTime" label="修改时间" min-width="180"></el-table-column>
                
            </el-table>
            <div class="block">
                <el-pagination hide-on-single-page @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="pageNo" :page-sizes="[5, 10, 30, 50]" :page-size="pageSize"
                    layout="->,total, sizes, prev, pager, next, jumper" :total="totalCount">
                </el-pagination>
            </div>
        </div>
        <LcProcessAdd ref="LcProcessAddRef" @change="search"></LcProcessAdd><!--采用父窗口关闭传递的方法-->
        <LcProcessUpdate ref="LcProcessUpdateRef" @change="search"></LcProcessUpdate><!--采用父窗口关闭传递的方法-->
        <LcProcessDetail ref="LcProcessDetailRef"></LcProcessDetail>
        <LcDesignWin ref="LcDesignWinRef" @change="search"></LcDesignWin><!--采用父窗口关闭传递的方法-->
        <LcImageWin ref="LcImageWinRef" @change="search"></LcImageWin><!--采用父窗口关闭传递的方法-->
        <LcCodeWin ref="LcCodeWinRef" @change="search"></LcCodeWin><!--采用父窗口关闭传递的方法-->
        <LcProcessCopyWin ref="LcProcessCopyWinRef" @change="search"></LcProcessCopyWin><!--采用父窗口关闭传递的方法-->
        <LcProcessHisWin ref="LcProcessHisWinRef" @change="search"></LcProcessHisWin><!--采用父窗口关闭传递的方法-->
        <LcProcessFileUploadWin ref="LcProcessFileUploadWinRef" @change="search"></LcProcessFileUploadWin>
    </div>
</template>
  
<script>
import { SET_BREADCRUMB } from "@/store/breadcrumbs.module";
import LcProcessAdd from "@/view/bpm/lc-process/lc-process-add.vue";
import LcProcessUpdate from "@/view/bpm/lc-process/lc-process-update.vue";
import LcProcessDetail from "@/view/bpm/lc-process/lc-process-detail.vue";
import LcDesignWin from "@/view/bpm/lc-process/lc-design-win.vue";
import LcImageWin from "@/view/bpm/lc-process/lc-image-win.vue";
import LcCodeWin from "@/view/bpm/lc-process/lc-code-win.vue";
import LcProcessCopyWin from "@/view/bpm/lc-process/lc-process-copy.vue";
import LcProcessHisWin from "@/view/bpm/lc-process/lc-process-his-win.vue";
import LcProcessFileUploadWin from "@/view/bpm/lc-process/lc-process-file.vue";
import Swal from "sweetalert2";
import apiUtil from "@/core/util/apiUtil.js";
import { handleNotify, handleAlert, handleConfirm, showWating, closeWating ,downloadFileCallFn} from "@/core/util/jehcUtil.js";
export default {
    data() {
        return {
            searchForm: { title: "" ,flag:"",status:"",moduleKey:"", lcProductId:"",lcGroupId:"",},
            dataList: [],
            productList:[],
            groupList:[],
            sels: [], //当前选框选中的值
            pageNo: 1,      // 默认当前是第一页
            pageSize: 5,    // 当前每页的数据是5条
            totalCount: 0   // 总数默认为0
        }
    },
    watch: {        
        "searchForm.lcProductId":{//监听字段变化
            handler:function(newVal,old){
                this.searchForm.lcGroupId = "";
                if(newVal == "" || newVal == undefined || newVal == null){
                    this.groupList=[];
                }else{
                    this.initGroupList(newVal)
                }
            }
        },
    },
    components: {
        LcProcessAdd,
        LcProcessUpdate,
        LcProcessDetail,
        LcDesignWin,
        LcImageWin,
        LcCodeWin,
        LcProcessCopyWin,
        LcProcessHisWin,
        LcProcessFileUploadWin,
    },
    mounted() {
        this.$store.dispatch(SET_BREADCRUMB, [{ title: "流程管理" }]);
        this.initList();   // 按当前的页号和每页的数据量进行查询
        this.initProductList();
    },
    methods: {
        initList() {
            showWating({ renderBody: "tableBody" });
            var params = {};
            params.usePageNo = true;//采用第几页进行分页（兼容）
            params.pageSize = this.pageSize;//页面显示记录条数，在页面显示每页显示多少项的时候
            params.pageNo = this.pageNo;//开始的记录序号   
            params.searchJson = JSON.stringify(this.searchForm);//为form元素     
            apiUtil.queryPage(process.env.VUE_APP_BPM_API + "/lcProcess/list", params).then(({ data }) => {
                this.dataList = data.data;//给结果集赋值
                this.totalCount = data.total;// 获取当前数据的总数    
            });
        },

        handleSelectionChange(sels) {//获取选中的值
            this.sels = sels;
            console.log("选中的值", sels.map((item) => item.id));
        },
        addXtLcProcess() {//新建
            this.$refs.LcProcessAddRef.showModal()
        },
        updateXtLcProcess() {// 更新
            if (this.sels.length != 1) {
                handleAlert("请选择一条数据", "warning", 3)
                return;
            }
            let flag = this.sels.map((item) => item.flag);
            if(flag == 1){
                let id = this.sels.map((item) => item.id);
                this.$refs.LcProcessUpdateRef.showModal(id);
            }else{
                handleAlert("通过流程打包部署方式不支持编辑操作，如需编辑可采用在线设计", "warning", 3)
                return;
            }
        },
        delXtLcProcess() { // 废弃
            if (this.sels.length === 0) {
                handleAlert("请选择废弃的数据", "warning", 3)
                return;
            }
            // 删除前提示
            this.$bvModal.msgBoxConfirm("确认废弃记录吗?", {
                title: '提示',
                size: 'sm',
                buttonSize: 'sm',
                okVariant: 'success',
                okTitle: '确定',
                cancelTitle: '取消',
                headerClass: 'p-2 border-bottom-0',
                footerClass: 'p-2 border-top-0',
                hideHeaderClose: false,
                centered: true
            }).then(value => {
                if(value){
                    let ids = this.sels.map((item) => item.id);
                    // 根据后台想要的参数格式选择
                    // console.log(ids.join(",")); //1,2,3,4
                    // console.log(ids); //[1,2,3,4]
                    apiUtil.delete(process.env.VUE_APP_BPM_API + "/lcProcess/delete?id=" + ids.join(",")).then(data => {
                        if (data.data.success) {
                            handleAlert("废弃成功", "success", 3);
                            this.search();
                        } else {
                            handleAlert("废弃失败", "error", 3);
                        }
                    });
                }                
            }).catch(err => {               
            })         
        },
        handleSizeChange(val) { // 修改每页所存数据量的值所触发的函数
            this.pageSize = val;  // 修改页的大小
            this.initList();       // 按新的pageNo和pageSize进行查询
        },
        handleCurrentChange(val) { // 修改当前页所触发的函数
            this.pageNo = val;       // 更新当前的页
            this.initList();          // 按新的pageNo和pageSize进行查询
        },
        search() {
            this.pageNo = 1;       // 更新当前的页
            this.initList();          // 按新的pageNo和pageSize进行查询
        },
        resetAll() {
            Object.assign(this.$data.searchForm, this.$options.data().searchForm);
            this.search();
        },
        getLcProcessDetail(row) {
            this.$refs.LcProcessDetailRef.showModal(row.id);
        },
        initProductList(){
            let params = {};
            apiUtil.post(process.env.VUE_APP_BPM_API + "/lcProduct/find", params).then(({ data }) => {
                this.productList = data.data;
            });
        },
        initGroupList(id){
            let params = {};
            apiUtil.query(process.env.VUE_APP_BPM_API + "/lcGroup/find/"+id, params).then(({ data }) => {
                this.groupList = data.data;
            });
        },
        importProcess(){//导入            
            this.$refs.LcProcessFileUploadWinRef.showModal();
        },
        addDesign(){//在线设计
            this.$refs.LcDesignWinRef.showModal();
        },
        addLcDesign(row){//在线设计
            this.$refs.LcDesignWinRef.showModal(row);
        },
        showProcessImage(row){//监控
            this.$refs.LcImageWinRef.showModal(row);
        },
        downFile(row){//下载附件
            showWating({ renderBody: "tableBody",message:"验证文件..." });
            apiUtil.get(process.env.VUE_APP_FILE_API+"/attachment/get/"+row.attachmentId).then(({ data }) => {                
                let fileName = data.data.name; // 下载后的文件名称
                let params = "name='test" // 后台接口需要的参数
                let url = process.env.VUE_APP_FILE_API+'/downFile?id='+row.attachmentId; // 请求接口
                let method = "GET"; // 请求方式 GET或POST
                downloadFileCallFn(url, method, fileName,params);
            });
        },
        copyProcess(row){//复制
            this.$refs.LcProcessCopyWinRef.showModal(row);            
        },
        showLcDeploymentHis(row){//版本            
            this.$refs.LcProcessHisWinRef.showModal(row);  
        },
        createDeployment(row){//发布
            this.$bvModal.msgBoxConfirm('确定要发布该流程?', {
                title: '提示',
                size: 'sm',
                buttonSize: 'sm',
                okVariant: 'success',
                okTitle: '确定',
                cancelTitle: '取消',
                headerClass: 'p-2 border-bottom-0',
                footerClass: 'p-2 border-top-0',
                hideHeaderClose: false,
                centered: true
            }).then(value => {
                if(value){
                    let params = {id:row.id};
                    apiUtil.update(process.env.VUE_APP_BPM_API + "/lcProcess/createDeployment", params).then(({ data }) => {
                        if (data.success) {
                            handleAlert("发布成功", "success", 3);
                            this.search();
                        } else {
                            handleAlert("发布失败", "error", 3);
                        }
                    });
                }                
            }).catch(err => {               
            }) 
        },
        exportProcess(row){//导出
            this.$bvModal.msgBoxConfirm('确定要导出该流程?', {
                title: '提示',
                size: 'sm',
                buttonSize: 'sm',
                okVariant: 'success',
                okTitle: '确定',
                cancelTitle: '取消',
                headerClass: 'p-2 border-bottom-0',
                footerClass: 'p-2 border-top-0',
                hideHeaderClose: false,
                centered: true
            }).then(value => {
                if(value){
                    let fileName = row.title+".json"; // 下载后的文件名称
                    let params = "name='test" // 后台接口需要的参数
                    let url = process.env.VUE_APP_BPM_API+'/lcProcess/export?id='+row.id; // 请求接口
                    let method = "GET"; // 请求方式 GET或POST
                    downloadFileCallFn(url, method, fileName,params);
                }                
            }).catch(err => {               
            }) 
        },
        showResources(row){//源码
            this.$refs.LcCodeWinRef.showModal(row);            
        },
    }
};
</script>